<template>
  <view class="project-card">
    <view class="card-header" :class="headerClass">
      <text class="header-title">{{ title }}</text>
      <text class="header-description">{{ description }}</text>
    </view>

    <view class="card-content">
      <view class="progress-section">
        <view class="progress-header">
          <text class="progress-label">项目进度</text>
          <text class="progress-value">{{ progress }}%</text>
        </view>
        <view class="progress-bar">
          <view class="progress-indicator" :class="progressClass" :style="{ width: `${progress}%` }"></view>
        </view>
      </view>

      <view class="footer">
        <view class="footer-item">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
            <line x1="16" x2="16" y1="2" y2="6"></line>
            <line x1="8" x2="8" y1="2" y2="6"></line>
            <line x1="3" x2="21" y1="10" y2="10"></line>
          </svg>
          <text>截止 {{ formattedDate }}</text>
        </view>
        <view class="footer-item">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
            <circle cx="9" cy="7" r="4"></circle>
            <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
          </svg>
          <text>{{ collaborators }}人协作</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    required: true
  },
  progress: {
    type: Number,
    default: 0
  },
  dueDate: {
    type: String,
    required: true
  },
  collaborators: {
    type: Number,
    required: true
  },
  color: {
    type: String,
    default: 'blue',
    validator: (value) => ['blue', 'purple', 'teal', 'orange'].includes(value)
  }
});

const headerClass = computed(() => {
  const colorMap = {
    blue: 'bg-blue-gradient',
    purple: 'bg-purple-gradient',
    teal: 'bg-teal-gradient',
    orange: 'bg-orange-gradient'
  };
  return colorMap[props.color];
});

const progressClass = computed(() => {
  const colorMap = {
    blue: 'bg-blue-500',
    purple: 'bg-purple-500',
    teal: 'bg-teal-500',
    orange: 'bg-orange-500'
  };
  return colorMap[props.color];
});

const formattedDate = computed(() => {
  const date = new Date(props.dueDate);
  return `${date.getMonth() + 1}月${date.getDate()}日`;
});
</script>

<style scoped>
.project-card {
  border-radius: 12px;
  overflow: hidden;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s;
}

.project-card:active {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card-header {
  padding: 16px;
  color: white;
}

.bg-blue-gradient {
  background: linear-gradient(to right, #3b82f6, #2563eb);
}

.bg-purple-gradient {
  background: linear-gradient(to right, #8b5cf6, #7c3aed);
}

.bg-teal-gradient {
  background: linear-gradient(to right, #14b8a6, #0d9488);
}

.bg-orange-gradient {
  background: linear-gradient(to right, #f97316, #ea580c);
}

.header-title {
  font-size: 16px;
  font-weight: 700;
}

.header-description {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.9;
}

.card-content {
  padding: 12px;
}

.progress-section {
  margin-bottom: 12px;
}

.progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
}

.progress-label {
  font-weight: 500;
  color: #374151;
}

.progress-value {
  font-weight: 500;
  color: #374151;
}

.progress-bar {
  height: 6px;
  border-radius: 3px;
  background-color: #f3f4f6;
  overflow: hidden;
}

.progress-indicator {
  height: 100%;
  border-radius: 3px;
}

.bg-blue-500 {
  background-color: #3b82f6;
}

.bg-purple-500 {
  background-color: #8b5cf6;
}

.bg-teal-500 {
  background-color: #14b8a6;
}

.bg-orange-500 {
  background-color: #f97316;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #6b7280;
}

.footer-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
</style>